import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import ReactEcharts from 'echarts-for-react';
import st from '../Index.less';

@connect(({ problem }) => ({
  statistic: problem.sourceStatistic,
}))
class SourceStatistic extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.queryData();
  }

  queryData() {
    const { dispatch } = this.props;
    dispatch({
      type: 'problem/fetchSourceStatistic',
    });
  }

  render() {
    const { statistic } = this.props;
    let option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 'center',
        bottom: 'bottom',
        itemGap: 1,
        data: statistic.legend,
      },
      color: ['#ed6615', '#32c8cc', '#d2b242', '#24a5e8'],
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '80%',
          center: ['50%', '40%'],
          label: {
            normal: {
              position: 'inner',
            },
          },
          data: statistic.data,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    return (
      <div className={st.sourceStatistic}>
        <ReactEcharts style={{ height: '100%' }} option={option} />
      </div>
    );
  }
}

export default SourceStatistic;
